<template>
	<div class="screen3-module1-content hor-flex-containter">
		<div v-for="(itema,indexa) in titles" class="flex-block ver-flex-containter" :key="'block-'+indexa">
			<div class="title">{{itema}}</div>
			<div class="number-row">
				<div class="num-blocks">
					<div class="num-div" v-for="(chr,index) in _numbers['count'+indexa].numStr" :key="'count-'+indexa+'-'+index">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
						<span>{{chr}}</span>
					</div>
				</div>
				<div class="unit-view">{{_numbers['count'+indexa].unit}}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, toRefs, computed } from 'vue'
import { numberFormat } from '@/assets/js/utils'

const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {}
		}
	}
})
const {dataSource} = toRefs(props)

const formatCount = function(val){
	let res = '000';
	if (val)  {
		if (val>999) val = 999;
		res = numberFormat(val,3);
	} 
	return res;
}

const titles = ref([
	'今日已收货','剩余待收','今日已检','剩余待检','今日合格数','今日不合格'
])

const _numbers = reactive({
	count0:{
		unit:'单',
		numStr:'000'
	},
	count1:{
		unit:'单',
		numStr:'000'
	},
	count2:{
		unit:'单',
		numStr:'000'
	},
	count3:{
		unit:'单',
		numStr:'000'
	},
	count4:{
		unit:'件',
		numStr:'000'
	},
	count5:{
		unit:'件',
		numStr:'000'
	}
})

_numbers.count0.numStr = computed(()=>{
	return formatCount(dataSource.value.deliveryNum)
})
_numbers.count1.numStr = computed(()=>{
	return formatCount(dataSource.value.notDeliveryNum)
})
_numbers.count2.numStr = computed(()=>{
	return formatCount(dataSource.value.inspectNum)
})
_numbers.count3.numStr = computed(()=>{
	return formatCount(dataSource.value.notInspectNum)
})
_numbers.count4.numStr = computed(()=>{
	return formatCount(dataSource.value.consentNum)
})
_numbers.count5.numStr = computed(()=>{
	return formatCount(dataSource.value.notConsentNum)
})
</script>

<style scoped lang="scss">
.screen3-module1-content{
	height: 100%;
	box-sizing: border-box;
	font-size: .32em;
	color: #ffffff;
	.flex-block{
		flex-grow: 1;
	}
	.ver-flex-containter{
		justify-content: center;
		align-items: center;
	}
	.title{
		font-weight: bold;
		padding-bottom: .4em;
	}
	.number-row{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		.num-blocks{
			display: flex;
		}
		.unit-view{
			padding-left: .3em;
		}
	}
	.num-div{
		font-family: electronicFont;
		color: #ffff00;
		font-size: 2em;
		height: 1.2em;
		width: .72em;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #012b8a;
		box-sizing: border-box;
		border: 1px solid #002ea6;
		position: relative;
		overflow: hidden;
		.corner{
			$cornerSize:.12em;
			position: absolute;
			border-style: solid;
			border-color: #15afa9;
			width: $cornerSize;
			height: $cornerSize;
			z-index: 1;
		}
		.coner-top-left{
			top: 0;
			left: 0;
			border-width: 1px 0 0 1px;
		}
		.coner-top-right{
			top: 0;
			right: 0;
			border-width: 1px 1px 0 0;
		}
		.coner-bottom-left{
			bottom: 0;
			left: 0;
			border-width: 0 0 1px 1px;
		}
		.coner-bottom-right{
			bottom: 0;
			right: 0;
			border-width: 0 1px 1px 0;
		}
		&+.num-div{
			margin-left: .1em;
		}
	}
}
</style>